<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>上传文件</title>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
    <!--th:inline="javascript"  使用ajax请求的时候发现无法获取BasePath https://www.cnblogs.com/zhangruifeng/p/12347419.html -->
    <script th:inline="javascript" type="text/javascript">

        var basePath = /*[[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]]*/;
        console.log("basePath", basePath); // http://127.0.0.1:8088/deploy
        // console.log("basePath1", [[@{/index/ajaxtest}]]); // /deploy/index/ajaxtest

        $(function () {
            $("#btn").click(function () {
                console.log("点击按钮")
                $(this).attr("disabled", "disabled");
                var data = new FormData($("#addForm")[0]);
                var targetUrl = $("#addForm").attr("action");
                console.log(targetUrl)
                $.ajax({
                    url: targetUrl,
                    type: 'post',
                    cache: false, //上传文件不需缓存
                    async: true,
                    processData: false, //需设置为false。因为data值是FormData对象，不需要对数据做处理
                    contentType: false, //需设置为false。因为是FormData对象，且已经声明了属性enctype="multipart/form-data"
                    dataType: 'json', // 告诉服务器你期待返回的数据类型
                    data: data,
                    success: function (data) {
                        console.log("res: " + data)
                        if (data.code == 1) {
                            // 提交成功
                            console.log("success")
                            var msg = $("#btn");
                            alert(data.msg)
                            // 清空表单
                            $("#addForm")[0].reset();
                        } else {
                            // 提交失败
                            console.log("fail")
                            alert(data.msg)
                        }
                    },
                    error: function () {
                        alert("请求失败")
                    },
                    complete: function (xhr, status) {
                        // 请求完成之后执行，最后执行，无论成功失败都会执行
                        // 让button可以再次被点击
                        $("#btn").removeAttr("disabled");
                    }
                })
            })
        })
        /*]]>*/
    </script>
</head>

<body>

<div id="wrap">
    <div id="top_content">
        <div id="header">
            <div id="rightheader">
                <p th:text="${nowDate}">
                    2009/11/20
                    <br/>
                </p>
            </div>
            <div id="topheader">
                <h1 id="title">
                    <a href="uploadFile">上传文件</a>
                </h1>
            </div>
            <div id="navigation">
            </div>
        </div>
        <div id="content">
            <form id="addForm" th:action="@{/file/uploadFile}" method="post" enctype="multipart/form-data">
                <table cellpadding="0" cellspacing="0" border="0"
                       class="form_table">
                    <tr>
                        <td valign="middle" align="right">
                            上传文件:
                        </td>
                        <td valign="middle" align="left">
                            <input type="file" name="file" accept=".zip">
                        </td>
                    </tr>
                </table>
                <p>
                    <input type="button" class="button" value="提交 &raquo;" id="btn"/>
                </p>
            </form>
        </div>
    </div>
    <div id="footer">
        <div id="footer_bg">
            祝您使用愉快！
        </div>
    </div>
</div>

</body>

</html>